<template>
	<div class="serve-details" v-if="viewModel">
		<div class="serve-details_mhead">{{viewModel.title}}</div>
		<div class="serve-details_intro" v-html="conversionInit(viewModel.editor)"></div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				viewModel: null
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			async init() {
				var para = this.$route.query
				if (para.tableName) {
					this.viewModel = await this.$ala.httpGet('Api/LightApp/getsingle', para)
				}
			},
			conversionInit(data) {
				var value = data.replace(new RegExp('src="../../', 'g'), `src="${this.$ala.host}`)
				return value
			}
		}
	}
</script>
<style lang="scss">
	.serve-details {
		.serve-details_mhead {
			font-size: 28px;
			color: #C6C6C6;
			letter-spacing: 2px;
			padding: 24px 0;
			margin-top: 36px;
			position: relative;

			&::after {
				content: "";
				width: 108px;
				height: 4px;
				background-color: #C6C6C6;
				position: absolute;
				bottom: 0;
				left: 0;
			}
		}

		.serve-details_intro {
			width: 100%;
			margin-top: 30px;
		}
	}
</style>